<template>
    <div>
        <el-form-item label="案件开卷日期：" prop="caseType">
            <el-radio-group v-model="type">
                <el-radio :value="3" label="上月">上月</el-radio>
                <el-radio :value="6" label="本月">本月</el-radio>
                <el-radio :value="9" label="上季度">上季度</el-radio>
                <el-radio :value="8" label="本季度">本季度</el-radio>
                <el-radio :value="7" label="去年">去年</el-radio>
                <el-radio :value="5" label="自定义时间段">自定义时间段</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row :gutter="60">
            <el-col :span="10">
                <div>
                    <el-row :gutter="30">
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <img
                                    src="../../../../../assets/logo/feiyongchaxun.png"
                                    alt=""
                                    style="width: 30px; height: 30px"
                                />
                                <div style="font-weight: bold">
                                    <span>0.00</span><br />
                                    <span>未请款金额</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <img
                                    src="../../../../../assets/logo/icon_jiaofeijilu-copy.png"
                                    alt=""
                                    style="width: 30px; height: 30px"
                                />
                                <div style="font-weight: bold">
                                    <span>0.00</span><br />
                                    <span>已请款金额</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="40">
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <img
                                    src="../../../../../assets/logo/xzqk.png"
                                    alt=""
                                    style="width: 30px; height: 30px"
                                />
                                <div style="font-weight: bold">
                                    <span>0.00</span><br />
                                    <span>未收款金额</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <img
                                    src="../../../../../assets/logo/xzsk.png"
                                    alt=""
                                    style="width: 30px; height: 30px"
                                />
                                <div style="font-weight: bold">
                                    <span>0.00</span><br />
                                    <span>已收款金额</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="14">
                <div id="main" style="width: 650px; height: 300px"></div>
            </el-col>
        </el-row>
        <el-divider />
        <el-form-item prop="addressChinese" style="float: right; margin-right: 20px">
            <el-input v-model="formData.caseName" style="width: 270px" />
            <el-button type="primary"> 查询 </el-button>
        </el-form-item>

        <el-table class="mt-4" size="large" stripe>
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column label="我方文号" min-width="100" />
            <el-table-column label="申请号" min-width="100" />
            <el-table-column label="申请日" min-width="100" />
            <el-table-column label="请款状态" min-width="100" />
            <el-table-column label="收款状态" min-width="100" />
            <el-table-column label="费用名称" min-width="100" />
            <el-table-column label="费减类型" min-width="100" />
            <el-table-column label="币别" min-width="100" />
            <el-table-column label="金额" min-width="100" />
            <el-table-column label="数量" min-width="100" />
            <el-table-column label="实际币别" min-width="100" />
            <el-table-column label="实际金额" min-width="100" />
            <el-table-column label="应收日期" min-width="100" />
            <el-table-column label="实收日期" min-width="100" />
            <el-table-column label="官方期限" min-width="100" />
            <el-table-column label="实付日期" min-width="100" />
            <el-table-column label="操作" min-width="100">
                <template #default="{ row }">
                    <el-button
                        v-perms="['case:del']"
                        type="danger"
                        link
                        @click="handleDelete(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
// import { features } from 'process';
import { onMounted, nextTick } from 'vue'
import feedback from '@/utils/feedback'
import { caseLists, caseDelete } from '@/api/case'
import { usePaging } from '@/hooks/usePaging'

onMounted(() => {
    options()
    console.log('Component is created.')
})
const formData = reactive({
    rest: '',
    externalBillingDateStart: '',
    externalBillingDateEnd: '',
    aprogrammingLanguage: '',
    aisPapernotice: '',
    cfunctionAndArt: '',
    vfunctionAndArt: '',
    dfunctionAndArt: '',
    caseName: '',
    caseType: ''
})
const queryParams = reactive({
    correlationType: '',
    correlationTypeid: '',
    ourRef: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: caseLists,
    params: queryParams
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await caseDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

const type = ref([])
const options = () => {
    const chartDom = document.getElementById('main') as HTMLElement
    const myChart = echarts.init(chartDom)
    const option = {
        title: {
            text: '2024-08-01到2024-08-31费用统计',
            subtext: '默认为案件开卷时间为本月的金额统计，点击可查看费用明细'
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '30%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['未请款', '已请款', '未收款', '已收款'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '金额'
            }
        ],
        series: [
            {
                name: '金额',
                type: 'bar',
                barWidth: '40%',
                data: [
                    {
                        value: 10,
                        itemStyle: {
                            color: '#e18a6d'
                        }
                    },
                    {
                        value: 45,
                        itemStyle: {
                            color: '#7bcceb'
                        }
                    },
                    {
                        value: 30,
                        itemStyle: {
                            color: '#ff9e5d'
                        }
                    },
                    {
                        value: 20,
                        itemStyle: {
                            color: '#b8d681'
                        }
                    }
                ],
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    }
    option && myChart.setOption(option)
}
</script>

<style>
.el-row {
    margin-bottom: 40px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 10px;
    min-height: 110px;
    border: 1px solid #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
}
</style>
